<template>
  <div>
    <!-- 全局card -->
    <van-card
      v-for="(item, index) in cates_cards"
      :key="item.id"
      @click="card_btn(index)"
    >
      <template #thumb>
        <img class="thumb_img" :src="_localhost + item.img" alt="" />
      </template>
      <template #tags>
        <div class="tag2">
          <van-tag class="tag11">{{ item.goodsname }}</van-tag>
          <br />
          <van-tag class="tag12"
            ><span>￥ {{ item.price }}</span
            ><del
              ><span>￥ {{ item.market_price }}</span></del
            ></van-tag
          >
          <br />
          <van-tag class="tag13">双11.11限购</van-tag>
          <br />
          <van-tag class="tag14"
            >{{ item.conmentNum }}评论 &nbsp; 99%好评</van-tag
          >
        </div>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  props: ["cates_cards"],
  methods: {
    card_btn(index) {
        this.$router.push(`/detail?id=${this.cates_cards[index].id}`);
      
    },
  },
};
</script>

<style scoped>
.van-card {
  overflow: hidden;
  height: 40vw;
}
.thumb_img {
  width: 40vw;
  height: 40vw;
  margin-left: -0.15rem;
}
.tag2 {
  margin-left: 0.5rem;
}
/* 右侧内容 */
.tag11 {
  background-color: #0000;
  color: black;
  font-weight: 600;
}
.tag12 {
  margin-top: 0.15rem;
  background-color: #0000;
  color: black;
  font-weight: 600;
  font-size: 0.16rem;
}
.tag12 > span {
  color: orange;
}
.tag12 > del > span {
  color: #666;
}
.tag13 {
  margin-top: 0.2rem;
  background-color: #ff5f40;
  padding: 0.03rem 0.05rem;
  font-size: 0.16rem;
}
.tag14 {
  margin-top: 0.2rem;
  background-color: #0000;
  padding: 0.03rem 0.05rem;
  font-size: 0.16rem;
  color: #6669;
  font-weight: 600;
}

/*  */
.van-card:not(:first-child) {
  margin: 0;
}
</style>